<template>
    <div>
        <Row class="formRow">
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">订单号</span>
          </Col>
          <Col span="3" class="leftRow">
            <Input v-model="formInline.orderId" placeholder="订单编号" clearable style="width:100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">用户名称</span>
          </Col>
          <Col span="3" class="leftRow">
            <Input v-model="formInline.userName" placeholder="客户名称" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle">申请状态</span>
          </Col>
          <Col span="3" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.state" placeholder="订单状态">
              <Option v-for="o in orderCancelState"  :value="o.dataCode" :key="o.id">{{o.dataName}}</Option>
            </Select>
          </Col>
          <Col span="9" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
          </Col>
        </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :placement="placement" :current="1" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>


      <Modal
        v-model="audit" title="审核信息"  width="600">
        <Row>
          <Col span="24">   <span class="ModelInputTitle">订单号</span><Input size="large" v-model="auditForm.orderId" style="width:485px" disabled></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">审核意见</span>
          <Input size="large" v-model="auditForm.msg" style="width: 480px"type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
          </Col>
        </Row>
        <div slot="footer">
          <Button type="error" size="large"   @click="auditcancel">拒绝</Button>
          <Button type="success" size="large"   @click="auditok">通过</Button>
        </div>
      </Modal>
      <Modal
        v-model="okTips"
        title="提示"
        @on-ok="TipsOk"
        @on-cancel="cancel('您取消了操作')">
        <p><Icon type="information-circled" color="blue" size="24" style="margin-right: 10px"></Icon>确定通过审核？</p>

      </Modal>
      <Modal
        v-model="cancelTips"
        title="提示"
        @on-ok="TipsCancel"
        @on-cancel="cancel('您取消了操作')">
        <p><Icon type="information-circled" color="blue" size="24" style="margin-right: 10px"></Icon>确定拒绝？</p>

      </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
  import axios from "axios"
    export default {
        data() {
            return {
              okTips:false,//通过
              cancelTips:false,//拒绝
              audit:false,
              auditForm:{
                orderId:"",
                msg:"",
                id:""
              },
              orderCancelState:[],//申请状态
              page:1,
              pageSize:10,
              placement:"bottom",
              formInline:{
                orderId:"",
                state:"",
                userName:""
              },
              tableData:[],
              loading:true,
              total:0,
              cloums:[
                {
                  title: '订单号',
                  key: 'orderId',
                  width:120,
                  align:"center"
                },
                {
                  title: '用户名称',
                  key: 'userName',
                  width:120,
                  align:"center"
                },
                {
                  title: '退款金额',
                  key: 'refundAmount',
                  width:100,
                  align:"center"
                },
                {
                  title: '申请状态',
                  key: 'state',
                  width:100,
                  align:"center"
                },
                {
                  title: '审核意见',
                  key: 'suggest',
//                  width:150,
                  align:"center"
                },
                {
                  title: '退款原因',
                  key: 'reason',
//                  width:150,
                  align:"center"
                },
                {
                  title: '申请时间',
                  key: 'applyTime',
                  width:150,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:100,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creater',
                  width:100,
                  align:"center"
                },
                {
                  title: '创建时间',
                  key: 'createTime',
                  width:150,
                  align:"center"
                },
                {
                  title: '修改人',
                  key: 'updater',
                  width:100,
                  align:"center"
                },
                {
                  title: '修改时间',
                  key: 'updateTime',
//                  width:150,
                  align:"center"
                },
                {
                  title: '操作',
                  width:100,
                  align:"center",
                  fixed:"right",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"primary",
                          size:"small"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row)
                            this.audit = true;
                            this.auditForm.orderId = params.row.orderId;
                            this.auditForm.id = params.row.id;
                          }
                        }
                      },"审核")
                    ])
                  }
                },
              ]
            }
        },
      mounted(){
          this.getInfo();
          this.init();
      },
      methods:{
        getInfo(){
          var qs = require("qs");
          var param = qs.stringify({
            dictType:"orderCancel_state"
          })
          axios.post("/common/dictDataList",param).then((res)=>{
            if(res.data.code =="000000"){
              this.orderCancelState = res.data.data;
            }else{
              this.$Notice.error({title:res.data.code})
            }
          })
        },
        init(){
          var qs = require("qs");
          var param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            orderId:this.formInline.orderId,
            userName:this.formInline.userName,
            state:this.formInline.state
          });
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("/orderCancel/selectOrderCancelPage",param).then((res)=>{
            if(res.data.code =="000000"){
              this.loading = false;
              this.total = res.data.count;
              for(let i=0;i<res.data.data.length;i++){
                res.data.data[i].valid = res.data.data[i].valid=="1"?"是":"否";
                res.data.data[i].applyTime = this.format(res.data.data[i].applyTime);
                res.data.data[i].createTime = this.format(res.data.data[i].createTime);
                res.data.data[i].updateTime = this.format(res.data.data[i].updateTime);
                for(let j=0;j<this.orderCancelState.length;j++){
                  if(res.data.data[i].state == this.orderCancelState[j].dataCode){
                    res.data.data[i].state = this.orderCancelState[j].dataName;
                  }
                }
              }
              this.tableData = res.data.data;
            }else{
              this.$Notice.error({title:res.data.code})
            }
          })
        },
        onSubmit(){
          this.init();
        },
        resetForm(){
            this.formInline.orderId = "";
            this.formInline.userName = "";
            this.formInline.state = "";
            this.page =1;
            this.pageSize = 10;
            this.init();
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        },
        format(date,flag){
          if(date==""||date==null){
            return "";
          }
          var d = new Date(date);
          var year = d.getFullYear();
          var month = parseInt(d.getMonth())+1>9?parseInt(d.getMonth())+1:"0"+(parseInt(d.getMonth())+1);
          var day = d.getDate()>9?d.getDate():"0"+d.getDate();
          var h = d.getHours()>9?d.getHours():"0"+d.getHours();
          var m =  d.getMinutes()>9?d.getMinutes():"0"+d.getMinutes();
          var s = d.getSeconds()>9?d.getSeconds():"0"+d.getSeconds();

          if(flag =="1"){
            return year+"-"+month+"-"+day;
          }else{
            return year+"-"+month+"-"+day+" "+h+":"+m+":"+s;
          }
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
        auditok(){
          this.okTips = true;
        },
        auditcancel(){
          this.cancelTips = true;
        },
        TipsOk(){
          //通过审核
          var qs = require("qs");
          var param = qs.stringify({
            suggest:this.auditForm.msg,
            state:"02",
            id:this.auditForm.id
          })
          axios.post("/orderCancel/updateOrderCancel",param).then((res)=>{
              if(res.data.code =="000000"){
                this.audit = false;
                this.$Notice.success({title:"审核成功"});
                this.init();
              }else{
                this.$Notice.error({title:res.data.msg});
              }
          })
        },
        TipsCancel(){
          //拒绝审核
          var qs = require("qs");
          var param = qs.stringify({
            suggest:this.auditForm.msg,
            state:"00",
            id:this.auditForm.id
          })
          axios.post("/orderCancel/updateOrderCancel",param).then((res)=>{
            if(res.data.code =="000000"){
              this.audit = false;
              this.$Notice.success({title:"审核成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        }
      }
    }
</script>
